<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="工单名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workName">
              <a-input v-model="model.workName" placeholder="请输入工单名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工单内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workContent">
              <a-textarea v-model="model.workContent" placeholder="请输入工单内容"></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workBegin">
              <j-date placeholder="请选择开始时间" v-model="model.workBegin" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workEnd">
              <j-date placeholder="请选择结束时间" v-model="model.workEnd" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工单图示" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workPic">
              <!-- <j-image-upload class="avatar-uploader" text="上传" v-model="model.workPic"></j-image-upload> -->
              <a-upload
                v-model="model.workPic"
                :action="url.fileUpload"
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"  
              >
                <!-- <div v-if="fileList.length <= 1"> -->
                <div>
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工单执行人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workUser">
              <a-input v-model="model.workUser" placeholder="请输入工单执行人"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工单创建人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createWorkUser">
              <a-input v-model="model.createWorkUser" placeholder="请输入工单创建人"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'WmsWorkForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      fileList: [],
      previewVisible: false,
      previewImage: '',
      form_data:{
        image:[]
      },
      model: {
        workName: '',
        workContent: '',
        workBegin: '',
        workEnd: '',
        state: 1,
        workPic: '',
        workUser: '',
        createWorkUser: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/wms/wmsWork/add',
        edit: '/wms/wmsWork/edit',
        queryById: '/wms/wmsWork/queryById',

        fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
        userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
        userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
        syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName', //同步用户到工作流
        queryTenantList: '/sys/tenant/queryList',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },

    //图片
    handleCancel() {
      this.previewVisible = false
    },
    // 查看图片
    async handlePreview(file) {
      console.log(file.originFileObj)
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
      //   console.log(this.previewImage)
    },
    // 图片选择
    async handleChange({ fileList }) {
      console.log(fileList)
      this.form_data.image = []
      if (fileList.length > 0) {
        if (!fileList[0].url && !fileList[0].preview) {
          this.form_data.image = await getBase64(fileList[0].originFileObj)
          console.log(this.form_data.image)
        }
        this.fileList = fileList
        console.log(this.fileList)
      } else {
        this.form_data.image = []
        this.fileList = []
        //   console.log(this.fileList)
      }
    },
    // 图片上传
    imgfile() {
      let imgfilelist = []
      this.fileList.filter((a) => {
        // console.log(a.originFileObj);
        imgfilelist.push(a.originFileObj)
      })
      let formData = new FormData() //创建form对象
      let config = {
        headers: { 'Content-Type': 'multipart/form-data', transformRequest: [(data) => data] },
        processData: true,
      }
      // 上传多张图片，必须遍历
      for (let item of imgfilelist) {
        formData.append('img', item)
      }
      this.$axios.post('/xx/xx/xx/', formData, config).then((response) => {
        if (response.retcode == 200) {
          console.log(response)
        }
      })
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
